import React from 'react';
import classnames from 'classnames';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Row, Col } from 'antd';
import { WeaDialog, WeaErrorPage, WeaTools, WeaNewScroll, WeaLocaleProvider } from 'ecCom';
import { WeaTableNew } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;

const { WeaTable } = WeaTableNew;
const { tryCatch } = WeaTools;

const store = [
  'routing',
  'staticViewStore',
];

@tryCatch(
  React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@14otok`} msg={props.error || getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')} />,
  { error: '' },
)

@inject(...store)
@observer
class StaticReadList extends React.Component {
  static displayName = 'StaticViewReadList';
  constructor(props) {
    super(props);
    this.prefixCls = 'email-static-view-readlist';
  }

  onListChange = (readed) => {
    const { staticViewStore, staticViewStore: { staticViewBean } } = this.props;
    const { setStoreState, getReadList } = staticViewStore;
    const { originalMailId, id } = toJS(staticViewBean);
    getReadList({ mailId: id, originalMailId, readed });
    setStoreState({ staticReadSeleted: readed });
  }

  render() {
    const { staticViewStore } = this.props;
    const { staticReadListVisible, readListCount, readListTableStore, setStoreState, staticReadSeleted } = staticViewStore;
    const colors = ['#3fc9d6', '#38b1ff', '#fe9637'];
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@thgpn1`}
        icon="icon-coms-email"
        iconBgcolor="#a0b0ba"
        title={getLabel(31369, '阅读状态')}
        visible={staticReadListVisible}
        style={{ width: 900, height: 570 }}
        className={this.prefixCls}
        onCancel={() => {
          setStoreState({ staticReadListVisible: false });
          setStoreState({ staticReadSeleted: '' });
        }}
        maskClosable={false}
      >
        <div>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0jdrwh`} className={`${this.prefixCls}-title`}>
            {
              readListCount.map(({ icon, count, label, key, selectKey: readed }, index) => {
                const titleCls = classnames({
                  [`${this.prefixCls}-title-btn`]: true,
                  [`${this.prefixCls}-title-btn-selected`]: readed === staticReadSeleted,
                });
                return (
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@umbxzi@${key}`} span={8} key={key} className={titleCls}>
                    <div onClick={() => this.onListChange(readed)}>
                      <i className={icon || 'icon-email-Unread-o'} style={{ color: colors[index] }} />
                      <p style={{ color: colors[index] }}>{count}</p>
                      <p>{label}</p>
                    </div>
                  </Col>
                );
              })
            }
          </Row>
          <div className={`${this.prefixCls}-table`}>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@tlx232`} height="100%">
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vlly2m`} comsWeaTableStore={readListTableStore} />
            </WeaNewScroll>
          </div>
        </div>
      </WeaDialog>
    );
  }
}
export default StaticReadList;
